<script setup>
import { ref } from 'vue';
import ParentModel from "@/views/accountSettings/components/ParentModel.vue";
import {userUserStore} from "@/stores/index.js";

//左侧的头部
const info = ref({
  phone: userUserStore().userInfo.phone,
  email: userUserStore().userInfo.email?userUserStore().userInfo.email: '绑定邮箱以提高账号安全'
});

// 弹窗控制
const isModalVisible = ref(false); // 弹窗显示状态
const modalTitle = ref(""); // 弹窗标题
const modalContent = ref(""); // 弹窗内容

const funItems = ref([
  { key: 1, title: '账号信息', label: '账号信息' },
])

//选中右上菜单
const handleClick = (e) => {
  switch (e.key) {
    case "phone":
      modalTitle.value = "手机号详情";
      modalContent.value = `您的手机号为：${info.value.phone}`;
      break;
    case "email":
      modalTitle.value = "邮箱详情";
      modalContent.value = `您的邮箱为：${info.value.email}`;
      break;
    case "password":
      modalTitle.value = "密码安全";
      modalContent.value = "为了您的账号安全，建议您定期修改密码。";
      break;
  }
  isModalVisible.value = true; // 显示弹窗
}

</script>

<template>
  <div class="main-container">
    <a-layout-content class="content">
      <a-card title="账号信息">
        <ParentModel />
      </a-card>
    </a-layout-content>
  </div>
  <!-- 弹窗组件-->
  <ParentModel :visible="isModalVisible"
               :title="modalTitle"
               @click="handleClick"
               @update:visible="(val) => (isModalVisible = val)">
    <p>{{ modalContent }}</p>
  </ParentModel>
</template>

<style scoped>
.main-container {
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
}

.headbar-container {
  height: 50px;
  width: 100%;
}

.layout {
  margin: 10px auto;
  width: 1184px;
  background-color: #e6f7ff;
  height: calc(100vh - 80px);
  border-radius: 10px;
}

.custom-menu-item {
  background: #fff !important;
  /* 默认背景色 */
  border-radius: 8px;
  margin-bottom: 16px;
  transition: background-color 0.3s;
}

.custom-menu-item:hover {
  background-color: #f8f8f8 !important;
  /* 悬浮时背景色 */
}

.fun-menu {
  border-inline-end: 0 !important;
}

.fun-list {
  border: 0;
  overflow-y: auto;
  overflow-x: visible;
  background-color: white;
  scrollbar-width: none;
}

.fun-list-header {
  height: 80px;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
  padding: 30px;
  border-bottom: 1px solid #e8e8e8;
}

/* 菜单项样式 */
:deep(.fun-menu .ant-menu-item) {
  height: 60px;
  /* 设置菜单项的高度 */
  line-height: 80px;
  /* 让文本垂直居中 */
  overflow: visible;
  padding-left: 40px;
  position: relative;
  /* 为伪元素创建定位环境 */
  font-size: 17px;
  font-weight: 520;
}

:deep(.fun-menu .ant-menu-item-selected::before) {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  /* 长条的宽度 */
  height: 100%;
  background-color: #00bebd;
  /* 长条的颜色 */
}

.fun-menu .ant-menu-item-selected a {
  color: #000;
}

.mt-24 {
  margin-top: 24px;
}
</style>